<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>家庭记账本</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath }/css/font-awesome.min.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath }/css/index.css">
    <script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-1.11.1.min.js"></script>

    <script type="text/javascript">
        $(function () {
            let $login = $(".login");
            let $signup = $(".signup");

            let $loginbtn = $(".loginbtn");
            let $signupbtn = $(".signupbtn");

            let $confirm_login = $(".confirm-login")
            let $confirm_signup = $(".confirm-signup")

            let $user = $(".head");
            //如果地址参数是regist，将卡片翻转过来
            if ("${param.action}" === "regist") {
                $login.css("transform", "rotateY(180deg)");
                $signup.css("transform", "rotateY(0deg)");
                $user.html("注册账号");
                // 清空数据
                $("#login-username").val("")
                $("#login-password").val("")
                $("#login-errorMsg").text("")
            }


            $signupbtn.click(function () {
                //在地址栏后面放入参数
                let state = {title: '', url: window.location.href.split("?")[0]};
                history.pushState(state, '', "?action=regist");
                //旋转卡片
                $(".box").css("transition", "all 0.5s")
                $login.css("transform", "rotateY(180deg)");
                $signup.css("transform", "rotateY(0deg)");
                $user.html("注册账号");
                // 清空数据
                $("#login-username").val("")
                $("#login-password").val("")
                $("#login-errorMsg").text("")
            })

            $loginbtn.click(function () {
                let state = {title: '', url: window.location.href.split("?")[0]};
                history.pushState(state, '', "?action=login");
                $(".box").css("transition", "all 0.5s")
                $login.css("transform", "rotateY(0deg)");
                $signup.css("transform", "rotateY(-180deg)");
                $user.html("用户登录");
                // 清空数据
                $("#signup-username").val("")
                $("#signup-password").val("")
                $("#repwd").val("")
                $("#email").val("")
                $("#signup-errorMsg").text("")
            })

            $confirm_login.click(function () {

                let usernameText = $("#login-username").val()
                let passwordText = $("#login-password").val()

                if (usernameText === null || usernameText === "") {
                    $("#login-errorMsg").text("用户名不能为空")
                    return false
                }
                if (passwordText === null || passwordText === "") {
                    $("#login-errorMsg").text("密码不能为空")
                    return false
                }

                $("#login-errorMsg").text("");
            })

            $confirm_signup.click(function () {

                let usernameText = $("#signup-username").val();
                let usernamePatt = /^[A-Za-z0-9]{5,12}$/;
                if (!usernamePatt.test(usernameText)) {
                    $("#signup-errorMsg").text("用户名不合法(5-12位英文和数字)")
                    return false;
                }

                let nameText = $("#signup-name").val();
                let namePatt = /^.{3,12}$/;
                console.log(nameText)
                if (!namePatt.test(nameText)) {
                    $("#signup-errorMsg").text("昵称不合法(3-12位字符)")
                    return false;
                }
                let passwordText = $("#signup-password").val();
                let passwordPatt = /^\w{5,20}$/;
                if (!passwordPatt.test(passwordText)) {
                    $("#signup-errorMsg").text("密码不合法(5-20位)");
                    return false;
                }
                let repwdVal = $("#repwd").val();
                if (repwdVal !== passwordText) {
                    $("#signup-errorMsg").text("两次密码不一致");
                    return false;
                }
                let emailText = $("#email").val();
                let emailPatt = /^[a-z\d]+(\.[a-z\d]+)*@([\da-z](-[\da-z])?)+(\.{1,2}[a-z]+)+$/
                if (!emailPatt.test(emailText)) {
                    $("#signup-errorMsg").text("邮箱不合法");
                    return false;
                }

                let codeText = $("#code").val();
                codeText = codeText.trim()
                if (codeText == null || codeText === "") {
                    $("#signup-errorMsg").text("验证码为空");
                    return false;
                }

                $("#signup-errorMsg").text("");
            })
            $("#code_img").click(function () {
                this.src = "${pageContext.request.contextPath }/code.jpg?seed=" + new Date();
            })

        })
    </script>

</head>

<body>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
    <path fill="#0099ff" fill-opacity="1"
          d="M0,192L48,197.3C96,203,192,213,288,229.3C384,245,480,267,576,250.7C672,235,768,181,864,181.3C960,181,1056,235,1152,234.7C1248,235,1344,181,1392,154.7L1440,128L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path>
</svg>
<div class="user">
    <i class="fa fa-user"></i>
    <div class="head">用户登录</div>
</div>

<div class="container">
    <div class="box login">
        <div class="form-content">
            <div class="avtar">
                <div class="pic"><img src="${pageContext.request.contextPath }/img/1.jpg" alt=""></div>
            </div>
            <h1>欢迎回来</h1>
            <form method="post" action="${pageContext.request.contextPath }/manager/userServlet?action=login"
                  class="form">

                <div>
                    <i class="fa fa-user-o"></i>
                    <input id="login-username" type="text" placeholder="用户名" name="username"
                           value="${requestScope.username}">
                </div>

                <div>
                    <i class="fa fa-key"></i>
                    <input id="login-password" type="password" placeholder="密码" name="password">
                </div>
                <div id="login-errorMsg">${empty requestScope.login_msg ? "" : requestScope.login_msg}</div>
                <div class="confirm-login btn">
                    <button>登录</button>
                </div>
            </form>


            <p class="btn-something">
                还没有账号 ? <span class="signupbtn">注册</span>
            </p>
        </div>
    </div>
    <div class="box signup">
        <div class="form-content">
            <div class="avtar">
                <div class="pic"><img src="${pageContext.request.contextPath }/img/noface.jpg" alt=""></div>
            </div>
            <h1>创建一个账号</h1>
            <form method="post" action="${pageContext.request.contextPath }/manager/userServlet?action=regist"
                  class="form">
                <div>
                    <%--矢量图标--%>
                    <i class="fa fa-user-o"></i>
                    <input id="signup-username" type="text" placeholder="用户名" name="username"
                           value="${requestScope.username}">
                </div>
                <div>
                    <i class="fa fa-user-o"></i>
                    <input id="signup-name" type="text" placeholder="昵称" name="name" value="${requestScope.name}">
                </div>
                <div>
                    <i class="fa fa-key"></i>
                    <input id="signup-password" type="password" placeholder="密码" name="password">
                </div>
                <div>
                    <i class="fa fa-key"></i>
                    <input id="repwd" type="password" placeholder="确认密码">
                </div>
                <div>
                    <i class="fa fa-envelope-o"></i>
                    <input id="email" type="text" placeholder="邮箱" name="email" value="${requestScope.email}">
                </div>
                <div>
                    <i class="fa fa-font"></i>
                    <input id="code" type="text" placeholder="验证码" name="code" style="width: 150px">
                    <img id="code_img" alt="" src="${pageContext.request.contextPath }/code.jpg"
                         style="float: right; margin-right: 40px;width: 100px;height: 30px;margin-top: 10px">
                </div>

                <div id="signup-errorMsg">${empty requestScope.regist_msg?"":requestScope.regist_msg}</div>
                <div class="confirm-signup btn">
                    <button>注册</button>
                </div>
            </form>
            <p class="btn-something">
                已经有了账号 ? <span class="loginbtn">登录</span>
            </p>
        </div>
    </div>
</div>
</body>


</html>